import React, { useEffect, useState, useRef } from 'react'
import { Pagination, Modal, Button, Form, Input } from 'antd'
import axios from 'axios'
import MyModel from '../../components/model/MyModel'

/**
 * pc/移动 （form表单）获取 设置
 *
 * 布局：
 *
 * 获取：
 * 1. 要有key值（form.item 要有name属性）
 * 2. 要有提交按钮
 * 3. 要有onFinish函数
 * 4. 可以采用form实例 的方法获取form表单数据：const result = form.getFieldsValue()
 * 设置：
 * 1. 有数据
 * 2. 找到form表单
 * 3. 处理设置 form.setFieldsValue(data)
 * 4. 获取
 * 设置默认数据
 * initialValues
 *
 */
const Home = () => {
  const [data, setData] = useState({ username: '123', password: 'admin' })
  const [isModalVisible, setIsModalVisible] = useState(false)

  const handleOk = (values) => {
    console.log('values:', values)
    setIsModalVisible(false)
  }

  const handleCancel = () => {
    setIsModalVisible(false)
  }

  return (
    <div>
      <Button
        onClick={() => {
          // form.setFieldsValue(data)
          // const result = form.getFieldsValue()
          // console.log(result, 'result')

          // 显示弹出框
          setIsModalVisible(true)
        }}
      >
        按钮
      </Button>
      <MyModel isModalVisible={isModalVisible} handleOk={handleOk} handleCancel={handleCancel}></MyModel>
    </div>
  )
}

export default Home
